<template>
  <div v-loading="loading" class="order_box" element-loading-text="拼命加载中...">
    <div class="head">
      <div class="full">
        <SvgIcon color="var(--el-color-primary)" icon="order-approve-outline" size="32" style="margin-right: 5px;"></SvgIcon>
        <div class="text">
          <div>订单号：{{ infoData.order_no || '-' }}</div>
        </div>
      </div>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="补贴信息" name="BaseInfo">
        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="记录信息">
            <el-descriptions-item :width="itemWidth" label="补贴类型：">
              <DictTag v-model="infoData.type" :circle="false" dict-type="queue_subsidy_type"/>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="补贴状态：">
              <DictTag v-model="infoData.status" :circle="false" dict-type="queue_subsidy_status"/>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="订单金额：">
              <span>{{ numeral(infoData.payment).format('0.00') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="支付时间：">
              <span>{{ infoData.payment_time || '-' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-divider border-style="dashed"/>

        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="奖励信息">
            <el-descriptions-item :width="itemWidth" label="门店排名：">
              <span>{{ infoData.rank || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="应返金额：">
              <span>{{ numeral(infoData.subsidy).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="已返金额：">
              <span>{{ numeral(infoData.received).format('0.0000') }}</span>
            </el-descriptions-item>

            <el-descriptions-item :width="itemWidth" label="商家让利总额：">
              <span>{{ numeral(infoData.rebate_total).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="消费者奖励：">
              <span>{{ numeral(infoData.consumer_reward).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="门店第一奖励：">
              <span>{{ numeral(infoData.first_reward).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="门店加权奖励：">
              <span>{{ numeral(infoData.average_reward).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="手续费奖励：">
              <span>{{ numeral(infoData.withdraw_poundage_fee).format('0.0000') }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-divider border-style="dashed"/>

        <el-card class="content-card">
          <el-descriptions :column="responsiveState.column" title="公排奖励">
            <el-descriptions-item :width="itemWidth" label="公排状态：">
              <DictTag v-model="infoData.public_status" :circle="false" dict-type="sys_open"/>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="公排类型：">
              <DictTag v-model="infoData.public_queue_type" :circle="false" dict-type="public_queue_type"/>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="公排编码：">
              <span>{{ infoData.public_queue_code || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="公排排名：">
              <span>{{ infoData.region_rank || '-' }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="公排第一奖励：">
              <span>{{ numeral(infoData.public_first_reward).format('0.0000') }}</span>
            </el-descriptions-item>
            <el-descriptions-item :width="itemWidth" label="公排加权奖励：">
              <span>{{ numeral(infoData.public_average_reward).format('0.0000') }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-tab-pane>

      <el-tab-pane v-if="hasPermission('subsidy:income:list')" label="补贴明细" name="SubsidyIncome">
        <QueueSubsidyIncome :id="id" ref="subsidyIncome"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { SvgIcon } from '@/components/icon';
import { useResponsiveState } from '@/hooks/use-responsive-state.ts';
import { nextTick, ref } from 'vue';
import numeral from 'numeral';
import { DictTag } from '@/components/dict-tag';
import { QueueSubsidy } from '@/views/subsidy/queue/data.ts';
import { subsidyQueueInfo } from '@/api/api-subsidy.ts';
import QueueSubsidyIncome from './queue-subsidy-income.vue';
import { hasPermission } from '@/utils/permission.ts';

const props = defineProps({
  id: {
    type: Number,
    required: true
  }
});
const loading = ref(false);
const itemWidth = ref('130px')
const responsiveState = useResponsiveState(
    {
      ['lg']: {column: 3},
      ['sm']: {column: 2},
      ['xs']: {column: 1},
    },
    {column: 3,},
);

/** 信息 */
const defInfoData: QueueSubsidy = <QueueSubsidy>{};
const infoData = ref({...defInfoData});
const activeName = ref('BaseInfo')
const subsidyIncome = ref();

/** 刷新数据 */
const handleRefresh = async () => {
  activeName.value = 'BaseInfo'
  infoData.value = {...defInfoData};
  await initData(props.id);
  await nextTick(() => subsidyIncome.value?.handleSearch());
};

/** 加载数据 */
const initData = async (id: number) => {
  if (!id || id <= 0) {
    return
  }
  loading.value = true
  try {
    // 加载数据
    const {data} = await subsidyQueueInfo(id);
    infoData.value = data;
  } finally {
    loading.value = false
  }
};

defineExpose({handleRefresh})
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    margin-right: 0;
    min-width: 98px;
    display: inline-block;
    vertical-align: top;
  }

  .el-descriptions__cell {
    vertical-align: top;
    font-size: 13px !important;
  }

  .el-divider--horizontal {
    margin: 8px 0;
  }

  .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 6px;
  }
}

.order_box {
  .head {
    padding: 15px;
  }

  .full {
    display: flex;

    .text {
      align-self: center;
      flex: 1;
      padding-left: 6px;
      font-size: 13px;
    }
  }
}


</style>
